.gradientText {
  display: inline-flex;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.character {
  transition:
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  white-space: pre;
  font-weight: 500;
}

.character.base {
  color: #8c8c8c; /* gray-500 */
}

.character.highlight {
  color: #1890ff; /* blue-primary */
  text-shadow:
    0 0 8px rgba(24, 144, 255, 0.4),
    0 0 16px rgba(24, 144, 255, 0.2);
  filter: brightness(1.1);
  font-weight: 600;
  transform: scale(1.05);
}

.character.fade1 {
  color: #40a9ff; /* blue-400 */
  font-weight: 550;
}

.character.fade2 {
  color: #69c0ff; /* blue-300 */
  font-weight: 525;
}

.character.fade3 {
  color: #91d5ff; /* blue-200 */
}

.character.fade4 {
  color: #bae7ff; /* blue-100 */
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .character.base {
    color: #595959; /* gray-600 */
  }

  .character.highlight {
    color: #40a9ff; /* blue-400 */
    text-shadow:
      0 0 10px rgba(64, 169, 255, 0.5),
      0 0 20px rgba(64, 169, 255, 0.3);
    filter: brightness(1.2);
    font-weight: 600;
    transform: scale(1.05);
  }

  .character.fade1 {
    color: #1890ff; /* blue-500 */
    font-weight: 550;
  }

  .character.fade2 {
    color: #096dd9; /* blue-600 */
    font-weight: 525;
  }

  .character.fade3 {
    color: #0050b3; /* blue-700 */
  }

  .character.fade4 {
    color: #003a8c; /* blue-800 */
  }
}

/* 自定义颜色变量支持 */
.gradientText[data-base-color] .character.base {
  color: var(--base-color);
}

.gradientText[data-highlight-color] .character.highlight {
  color: var(--highlight-color);
}

/* 动画暂停状态 */
.gradientText.paused .character {
  transition: none;
}
